@import "ubuntu-colors";

$small_radius: 4px;

/***********
* Tweak Tool *
***********/
list.tweak-categories separator {
  // hide sidebar separators
  // make the sidebar look like a normal sidebar
  background: transparent;
}

/******************
 * GNOME Calendar *
 ******************/
 
// Week view event labels with a light background.
.color-light.vertical > stack > grid > label {
  color: black;
}

// Week view event labels with a dark background.
.color-dark.vertical > stack > grid > label {
  color: white;
}

// Month/year view event labels with a light background.
.color-light.horizontal > stack > grid > label {
  color: black;
}

// Month/year view event labels with a dark background.
.color-dark.horizontal > stack > grid > label {
  color: white;
}

// Month/year view event labels with no background.
.color-light.horizontal.timed > stack > grid > label {
  color: $fg_color;
}

.color-dark.horizontal.timed > stack > grid > label {
  color: $fg_color;
}

/***********
* Nautilus *
***********/

// Disk Space Pie Chart
// Code from 
// gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/Adwaita.css
.disk-space-display {
  $disk_space_unknown: #888;
  $disk_space_used: #6ACAD8;
  $disk_space_free: #eeeeec;
  border-style: solid;
  border-width: 2px;

  &.unkown {
    background-color: $disk_space_unknown;
    border-color: shade($disk_space_unknown, 0.7);
    color: $disk_space_unknown;

    &.border {
      color: shade($disk_space_unknown, 0.7);
    }
  }

  &.used {
    background-color: $disk_space_used;
    border-color: shade($disk_space_used, 0.7);
    color: $disk_space_used;

    &.border {
      color: shade($disk_space_used, 0.7);
    }
  }

  &.free {
    background-color: $disk_space_free;
    border-color: shade($disk_space_free, 0.7);
    color: $disk_space_free;

    &.border {
      color: shade($disk_space_free, 0.7);
    }
  }
}

.nautilus-window {
  // keep details box visible
  // details box looks ugly when many items are selected and it floats above the orange
  background-image: none;
  background-color: if($variant=='light', white, $base_color);
  &:backdrop { background-color: $backdrop_base_color }

  $_headerbar_button_bg: darken($headerbar_bg_color, 2%);
  $_btn_backdrop_border: darken($headerbar_border_color, 3%);
  
  .path-buttons-box {
    border: 1px solid;
    border-radius: $button_radius;
    transition: all 200ms $ease-out-quad;
    @include button(normal, $_headerbar_button_bg, $headerbar_fg_color);
    
    &:backdrop {
      @include button(backdrop, $backdrop_headerbar_bg_color, $backdrop_headerbar_fg_color);
      border-color: $_btn_backdrop_border;
    }

    button {
      background: transparent;
      border: none;
      box-shadow: none;
    }
  }

  .nautilus-path-bar .popup {
    margin: 6px 0;
  }

  /* Path bar */

  .nautilus-path-bar {
    > scrolledwindow {
      @include button(normal, $_headerbar_button_bg, $headerbar_fg_color);
      margin: 6px 0px 6px 0px;
      border-radius: 4px 0px 0px 4px;
      border-width: 1px;
      border-style: solid;
      transition: 200ms ease-out;

      &:backdrop {
        @include button(backdrop, $backdrop_headerbar_bg_color, $backdrop_headerbar_fg_color);
        border-color: $_btn_backdrop_border;
      }

      viewport, viewport box {
        border: none;
        box-shadow: none;
        background: none;
      }

      undershoot.left {
        border-radius: 5px;
        background: linear-gradient(to right, rgba($_headerbar_button_bg, 0.9) 4px, rgba($_headerbar_button_bg, 0.0) 24px);
      }
      undershoot.right {
        background: linear-gradient(to left, rgba($_headerbar_button_bg, 0.9) 4px, rgba($_headerbar_button_bg, 0.0) 24px);
      }
    
    }
    
    > button {
      margin: 0;

      &.toggle {
        border-left-width: 0;
      }
    }

    .path-buttons-box {
      button {
        margin: 0px;
        box-shadow: none;
        border-radius: $button_radius;
        border-width: 0px;
        -gtk-icon-shadow: none;
    
        &:hover {
          box-shadow: none;
        }

        &:not(:hover),
        &.current-dir {
          background: none;
        }

        &:not(.current-dir):not(:backdrop):hover label {
          opacity: 1;
        }
      }
    }
  }

  // Make sure tags fit inside the search entry
  entry.search > * {
    margin: 5px;
  }  

  // Makes icons less bright in backdrop
  @at-root %dim_icons_in_backdrop,
  & *scrolledwindow:backdrop { opacity: 0.9; }

  paned box.floating-bar {
    background: transparentize($jet, 0.1);
    color: $porcelain;
    border: none;
    border-radius: $small_radius 0 0 0;

    /* stop upload folder button */
    button.circular.flat.image-button {
      // style both normal and hover at the same time is necessary
      // otherwise gtk will take the style from somewhere else...
      &, &:hover {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        color: $bg_color;
        margin: 2px;
      }

      &:backdrop {
        transition: none;
        border-color: transparent;
      }

      // ...and here style just the difference from normal
      &:hover {
        color: $destructive_color;
      }
    }

    &:backdrop {
      @if $variant=='light' {
        background: transparentize(darken($backdrop_bg_color, 10%), 0.1);
      }
      @else {
        background: transparentize(lighten($jet, 10%), 0.1);
      }
    }
  }

  .searchbar-container searchbar {
    // get rid of a 1px white line shown at the top of the window
    // applies to the desktop too
    background: transparent;
    border-color: transparent;
  }

  treeview:drop(active):focus {
    // drop target green bottom border was missing
    border-bottom: 1px solid $drop_target_color;
  }

  treeview.view header button {
    background-color: if($variant=='light', $base_color, $base_color);
    background-image: none;
    border-color: transparentize($borders_color, 0.6);
    border-left: 1px;

    &:hover {background-color: $bg_color;}
    &:backdrop { background-color: if($variant=='light', #EEEFF0, $backdrop_base_color);} // It should be _backdrop_color(white); but that does not work.
  }

  @at-root %remove_folder_icon_tint,
  scrolledwindow widget.view:selected {
    // reduces orangeness of selected folder icons
    background-color: rgba(255, 255, 255, 0.1); // folder icon is tinted based on this
                                                // near transparent white results in no tint
                                                // completely transparent tints the icon black
    background-image: image($selected_bg_color); // label background becomes this
    border-radius: $small_radius;
  }

  .nautilus-list-view .view {
    border-bottom: 1px solid transparentize($borders_color, 0.8);

    // Hide superfluous treeview drop target indication
    &.dnd { border-style: none; }

    button {
      border: 1px solid $borders_color;
      border-top-width: 0;
      border-left-width: 0;
      color: rgba($fg_color, 0.7);

      &:first-child {
        border-left-width: 0px;
      }
    }
  }

  notebook > header {
    background: if($variant==light, $porcelain, $bg_color);
  }

  paned > separator {
    // separator between sidebar and main window view
    $_alpha: if($variant=='light', 0.08, 0.16);
    $_separator_color: rgba(0, 0, 0, $_alpha);

    background-image: image($_separator_color);
    &:backdrop { background-image: image(transparentize($borders_color, 0.7)); }
  }

  .nautilus-canvas-item.dim-label,
  .nautilus-list-dim-label {
      color: if($variant==light, lighten($text_color, 30%), darken($text_color, 25%));
      &:selected { color: transparentize($selected_fg_color, 0.3); }
  }

  .nautilus-canvas-item {
    -gtk-outline-radius: $small_radius;
    outline-offset: -2px;
    &:selected {
      outline-color: white;
    }
  }
}

.nautilus-desktop-window {
  .nautilus-desktop.view {
    color: $selected_fg_color;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

/******************
  * GNOME Software *
  ******************/
.review-row {
  margin-bottom: 10px;
  padding: 6px 12px;
  box-shadow: 0 1px 2.5px transparentize(black, 0.75);
  outline-offset: -1px;

  &,
  &:not(:selected):not(:backdrop):hover,
  &:not(:selected):not(:backdrop):active { background-color: $base_color; }

  &:backdrop { background-color: $backdrop_base_color; }

  &:last-child { margin-bottom: 0; }

  > grid { margin-top: -24px; }
}

.app-listbox-header { background: $dark_fill; }

.list-box-app-row {
  border-radius: 0;
  border-color: $borders_color;
  border-style: none solid solid solid;
  border-width: 0 1px 1px 1px;
  margin: -1px 0 0 0;

  & ~ separator {
    background-color: $bg_color;
    border: none;
    min-height: 0px;
  }
}

// Avoid double border when list in included in a box (e.g. Updates view)
box > list row.list-box-app-row {
    border: none;
}

// Star color can not be set, so this gives the stars a background in the dark theme
//   .star{
//     @if $variant=='dark'{
//       border-radius: $small_radius;
//       box-shadow: inset 0 0 10px 10px #fdfdfd;
//     }
//   }

// Background color can not be set, so use a inset-box-shadow
.application-details-infobar {
  box-shadow: inset 0 0 100px 100px $base_color;
}

.category_page_header_filter_box  {
    box-shadow: inset 0 0 100px 100px $base_color;
}

//Used as update count in GNOME software
.counter-label {
  margin-top: 2px;
  margin-bottom: 2px;
  border-width: 0px;
  padding-left: 2px;
  padding-right: 2px;
  box-shadow: inset 0 0 10px 10px $success_color;
}

/*********
  * Gedit *
  *********/
.gedit-bottom-panel-paned notebook > header {
    background: if($variant==light, $porcelain, $bg_color);
}

.gedit-bottom-panel-paned ~ statusbar {
  // give gedit's bottom panel a border
  border-top: 1px solid $borders_color;

  &:backdrop { border-color: $backdrop_borders_color; }
}

.gedit-search-slider {
  // gives gedit search entry some padding and a border
  // otherwise it's right under the headerbar
  background: $bg_color;
  border: 1px solid $borders_color;
  border-top-style: none;
  padding: 4px 8px;
  border-radius: 0 0 5px 5px; // same radius as tooltips

  &:backdrop {
    background-color: $backdrop_bg_color;
    border-color: $backdrop_borders_color;
  }
}

.gedit-search-entry-occurrences-tag {
    color: transparentize($fg_color, 0.65);
    border: none; // Removed ugly tag border
    box-shadow: none; // Removed button inset shadow
    margin: 2px;
    padding: 2px;
}

.gedit-document-panel { // 'documents' pane

    background-color: $bg_color;
    row.activatable { padding: 6px; }

    row button { // 'close' button
        min-width: 22px;
        min-height: 22px;
        padding: 0;
        margin: 0;
        border: none;
    }

    row:hover button {
        &:hover {
            background-color: rgba($fg_color, 0.15);
        }
        &:active {
            background-color: rgba($fg_color, 0.25);
        }
    }

    row:hover:selected button:hover {
        color: $selected_fg_color;
    }
}

/***************
  * GNOME Disks *
  ***************/

headerbar button image ~ window decoration ~ menu separator {
  // gnome disks headerbar menu seems to inherit the headerbar separator bg color
  // no unique class names or id used here so this rule is as specific as it can be
  background: $borders_color;
}

/********
  * Nemo *
  ********/
.nemo-properties-dialog {
  .dialog-action-box .dialog-action-area {
    // add margin to preferences buttons
    margin: 2px 6px 4px;
  }

  toolbar stackswitcher.linked button {
    margin-right: 0;
    &:backdrop {
      color: $backdrop_fg_color;
      background-color: $backdrop_bg_color;
    }
  }
}

.nemo-window {
  .sidebar  {
    scrolledwindow.frame.nemo-places-sidebar {
      // get rid of double border in sidebar
      border: none;
    }

    viewport.frame box.vertical treeview.view.places-treeview {
      // use sidebar bg color
      background-image: image($sidebar_bg_color);
      border-radius: 0; // get rid of weird radius on selected rows
      &:backdrop { background-image: image($backdrop_sidebar_bg_color); }
      &:selected { background: $selected_bg_color; }
      &:not(:selected) {
        &:not(:backdrop):hover { background-image: image($base_hover_color); }
      }
    }
  }

  .view {
    // imports nautilus tweaks
    // dim icons in backdrop and have only labels be colored when selected
    &:selected { @extend %remove_folder_icon_tint; }
    &:backdrop { @extend %dim_icons_in_backdrop; }
  }

  toolbar.horizontal.primary-toolbar {
    // add border under toolbar
    border-bottom: 1px solid $borders_color;

    widget.linked.raised button {
      // use proper icons for next and left in stackswitcher-like pathbar
      &:first-child widget {-gtk-icon-source: -gtk-icontheme('go-previous-symbolic'); }
      &:last-child widget {-gtk-icon-source: -gtk-icontheme('go-next-symbolic'); }
    }

    toolitem box widget * {
      // reset toolbar button dimensions
      min-height: 0;
      min-width: 0;
    }

    .linked button {
      // link linked buttons
      margin-right: 0;
    }

    button {
      // return non-flat buttons
      @each $state, $t in ("", "normal"),
      (":hover", "hover"),
      (":active, &:checked", "active"),
      (":disabled", "insensitive"),
      (":disabled:active, &:disabled:checked", "insensitive-active"),
      (":backdrop", "backdrop"),
      (":backdrop:active, &:backdrop:checked", 'backdrop-active'),
      (":backdrop:disabled", 'backdrop-insensitive'),
      (":backdrop:disabled:active, &:backdrop:disabled:checked", 'backdrop-insensitive-active') {
        &#{$state} { @include button($t) }
      }
    }
  }
}

/*************
* GNOME ToDo *
**************/

.org-gnome-Todo {
  taskrow.activatable.new-task-row button.popup.toggle {
    border-radius: 0px;
    border: none;
    border-left: 1px solid $borders-color;
    padding-left: 10px; padding-right: 10px;
    -gtk-outline-radius: 0px;

  }

  viewport.view, listbox.transparent {
    background-color: darken($base_color,5%);
    &:backdrop { background-color: $backdrop_base_color}
  }
}

/****************
  * GNOME Photos *
  ****************/
//removes the black background for picture tiles
.documents-scrolledwin.frame.frame widget flowboxchild.tile { background-color: transparent; }

/***********
* Firefox *
***********/
#MozillaGtkWidget.background  {
  // REMOVE THIS when firefox supports rounded menus
  menu, .menu,.context-menu { border-radius: 0; }

  // Set a darker text-selection background
  // Ideally we don't need this, but https://bugzilla.mozilla.org/show_bug.cgi?id=1703679
  // tells Firefox to use the FG color instead of the BG color. Thus we need to 
  // Tell Firefox that we're using a different color than we normally are.
  // We then set the selection foreground color to be white to force Firefox
  // to use the correct one
  *:selected {
    color: $white;
    background-color: #48b9c7;
  }

  // Adapt scrollbars a bit more to the GTK Scrollbar styling
  scrollbar {
    background-color: transparent;
    border-color: transparent;

    slider  {
      background-color: darken($scrollbar_slider_color, 10%);
      &:hover { background-color: darken($scrollbar_slider_hover_color, 10%); }
      &:hover:active { background-color: $scrollbar_slider_active_color; }
      &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
      &:disabled { background-color: transparent; }
    }

    trough {
      background-color: transparentize($bg_color, 0.8);
    }
  }
}

  normal-button {
    @include button(normal);

    &:hover {
      @include button(hover);
    }
    &:active { @include button(active)}

    &:disabled {@include button(insensitive);}
  }

/*********************	
  * Chrome / Chromium *	
  *********************/	
  window.background.chromium {	
  @if $variant=='dark' {
    menu { border: 1px solid lighten($inkstone,1%); }
  }
}

normal-button {
  @include button(normal);

  &:hover {
    @include button(hover);
  }
  &:active { @include button(active)}

  &:disabled {@include button(insensitive);}
}

/***********
  * Ubiquity *
  ***********/

#live_installer {
    #progress_mode, #title_eventbox {
      background-color: $headerbar_bg_color;
      &:backdrop { background-color: $backdrop_headerbar_bg_color; }
    }
  #dot_grid {
    .empty { background-color: transparentize($blue, 0.6); }
  }
  #page_title { color: $headerbar_fg_color; }
}
#warning_dialog.background { border: 1px solid $borders_color; }
#dialog-action_area1 { padding-bottom: 5px; padding-right: 5px }

/***********
  * Geary *
  ***********/

.geary-expanded headerbar { border: none; }

/***********
  * usb-creator-gtk *
  ***********/

  #dialog-action_area3 { margin: 5px; }

  /***********
  * Evolution *
  ***********/

  assistant.background scrolledwindow .vertical checkbutton {
    // checkbox is clipped but this is undetectable till it gets keyboard focus
    // so we're pushing it to the right to have the focus ring be displayed properly
    margin-left: 1px
}
